import './Mars3dSetUp.scss'
import { Button, Result, Badge } from 'antd'
import PropTypes from 'prop-types'
import { useState } from 'react'
import { SettingOutlined, DeleteOutlined } from '@ant-design/icons'

const Mars3dOthA01 = ({ data, Off, ModalEvent }) => {
    Mars3dOthA01.propTypes = { data: PropTypes.object, Off: PropTypes.func, ModalEvent: PropTypes.object }
    const { OthA01 } = data

    const [List, setList] = useState(OthA01.centerList)
    const [Value, setValue] = useState(OthA01.defaultCenter)

    ModalEvent.useSubscription(val => {
        const { type } = val
        if (type === 'setCenter') {
            data.OthA01 = val.data
            setList(val.data.centerList)
            setValue(val.data.defaultCenter)
            ModalEvent.emit({ type: 'scene', data })
        }
    })

    const onCenter = (key) => {
        ModalEvent.emit({ type: 'center', data: List[key].center })
    }

    const onDefault = (e, key) => {
        e.stopPropagation()
        data.OthA01 = { centerList: List, defaultCenter: key }
        ModalEvent.emit({ type: 'scene', data })
        setValue(key)
    }

    const onDelete = (e, key) => {
        e.stopPropagation()
        delete List[key]
        data.OthA01 = { centerList: List, defaultCenter: Value }
        ModalEvent.emit({ type: 'scene', data })
        setList({ ...List })
    }


    return (
        <div className='Mars3dSetUp Mars3dOthA01'>
            <div className='Center'>
                {/* {console.log(Object.keys(centerList))} */}
                {Object.keys(List).length === 0 ?
                    <Result status="warning" title="暂无视角信息" /> :
                    Object.keys(List).map(key =>
                        <div className={`centerImage  ${key === Value ? 'active' : ''}`} key={key} onClick={() => onCenter(key)} >
                            <Badge.Ribbon text='默认视角'>
                                <img src={List[key].image} alt="" />
                                {key !== Value &&
                                    <div className='options Box_Shadow__A01'>
                                        <div onClick={(e) => onDefault(e, key)}>
                                            <SettingOutlined />
                                            <div>设置默认视角</div>
                                        </div>
                                        <div onClick={(e) => onDelete(e, key)}>
                                            <DeleteOutlined />
                                            <div>删除当前视角</div>
                                        </div>
                                    </div>
                                }
                            </Badge.Ribbon>
                        </div>
                    )
                }
            </div>
            <div className='Button'>
                <Button type='primary' danger onClick={Off}>关闭</Button>
                <Button type='primary' onClick={() => ModalEvent.emit({ type: 'getCenter', data: OthA01 })}>保存当前视角</Button>
            </div>
        </div>
    )
}

export default Mars3dOthA01